import React from 'react';
import { Button } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';

const navButtons = [
  { label: '数据目录树管理', path: '/type-config' },
  { label: '载荷源包中英文对照表', path: '/zh-en-config' },
  // { label: '磁盘监控路径配置管理', path: '/disk-path-config' },
  { label: '业务目录管理', path: '/dir-management' },
  { label: '日志管理', path: '/log-management' }
];

const OperationNavBar: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  return (
    <div className="nav-btn-group" style={{ marginBottom: 16, display: 'flex', gap: 12 }}>
      {navButtons.map(btn => (
        <Button
          key={btn.path}
          type={location.pathname === btn.path ? 'primary' : 'default'}
          style={{
            fontWeight: location.pathname === btn.path ? 700 : 400,
            fontSize: 16,
            borderRadius: 20,
            background: location.pathname === btn.path ? '#1890ff' : '#fff',
            color: location.pathname === btn.path ? '#fff' : '#1890ff',
            border: location.pathname === btn.path ? 'none' : '1px solid #1890ff',
            boxShadow: location.pathname === btn.path ? '0 2px 8px rgba(30, 87, 153, 0.10)' : 'none',
            padding: '6px 22px',
            transition: 'all 0.2s'
          }}
          onClick={() => navigate(btn.path)}
        >
          {btn.label}
        </Button>
      ))}
    </div>
  );
};

export default OperationNavBar; 